<template>
    <div class="cart-cont">
        <!-- 面包屑 -->
        <div class="detail-cont">
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>{{ active == 1 ? '订单列表' : '订单信息' }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="orderBtn">
            <!-- <div :class="activeType == 1 ? 'btn' : 'active'" @click="getActiveType(1)">
                订单列表1
            </div>
            <div :class="activeType == 2 ? 'btn' : 'active'" @click="getActiveType(2)">
                订单列表2
            </div>
            <div :class="activeType == 3 ? 'btn' : 'active'" @click="getActiveType(3)">
                订单列表3
            </div> -->
            <div class="active" @click="nav()">
                返回上一页
            </div>
        </div>
        <div class="cart-list">
            <div class="cart-bg">
            </div>
            <h2>产品销售单</h2>
            <div class="info-box">
                <el-row :gutter="20">
                    <el-col :span="8" :offset="0">单据类型：</el-col>
                    <el-col :span="8" :offset="0">单据日期：</el-col>
                    <el-col :span="8" :offset="0">单号：</el-col>
                </el-row>
            </div>
            <div class="info-box">
                <el-row :gutter="20">
                    <el-col :span="8" :offset="0">购货单位：</el-col>
                    <el-col :span="8" :offset="0">可用余额：</el-col>
                    <el-col :span="8" :offset="0">结算方式：转帐</el-col>
                </el-row>
            </div>
            <el-table :data="tableData" height="400" border :style="{ width: '100%' }"
                :cell-style="{ 'text-align': 'center', 'font-size': '.0729rem', padding: '.0313rem 0', border: '1px solid #000000' }"
                :header-cell-style="{ 'background': '#ffffff', 'text-align': 'center', 'font-size': '.0729rem', border: '1px solid #000000' }"
                class="custom-table">
                <el-table-column label="行号" width="106">
                    <template #default="scope">
                        <div>
                            {{ scope.$index + 1 }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="goods.name" label="产品名称" />
                <el-table-column prop="goods.sn" label="编号" width="200" v-if="bhShow == 1" />
                <el-table-column prop="goods.spec_name" label="规格" v-if="ggShow == 1" />
                <el-table-column prop="goods.unit" label="单位" />
                <el-table-column prop="goods_num" label="数量" />
                <el-table-column prop="goods.price" label="单价(片)" > 
                    <template #default="scope">
                     {{ scope.row.goods.goods_price }}
                    </template>
                </el-table-column>

                <el-table-column prop="goods.price" label="散提费" > 
                    <template #default="scope">
                     {{ scope.row.goods.car_price }}
                    </template>
                </el-table-column>
               
                <el-table-column label="销售金额">
                    <template #default="scope">
                     {{ scope.row.goods_num * scope.row.goods.goods_price }}
                    </template>
                </el-table-column>
            </el-table>
            <el-descriptions title="" border :style="{ border: '1px solid #000' }" class="total-box">
                <el-descriptions-item label="合计" :span="3">
                    <div class="total-cont">
                        <p>数量：{{ TotalNum }}</p>
                        <p>总货款：{{ TotalPrice }}</p>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="大写" :span="3">{{ PriceText }}</el-descriptions-item>
                <el-descriptions-item label="备注" :span="2"></el-descriptions-item>
            </el-descriptions>
            <el-button type="primary" @click="handleExp" :style="{ marginTop: '.1563rem' }"  v-if="ordershow == 1">导出数据</el-button>

        </div>
    </div>
</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { ref, computed } from 'vue';
import { UserCartList } from '../../api/user'
import { useUser } from '../../store/user';
import { CartExp ,getAuth} from '../../api/goods'
import router from '../../router';
import { useRoute } from 'vue-router'
const route = useRoute()

const active = ref(1)
const user = useUser()
const activeType = ref("1")

console.log(route.query);
let { token } = user.userinfo
// 表格数据
const tableData = ref([])
console.log();
let res = await UserCartList(route.query.type, token)
let { count, lists } = res.data.data
tableData.value = lists
// 数量
const TotalNum = computed(() => {
    let sum = 0
    tableData.value.forEach(obj => {
        sum += obj.goods_num
    })
    return sum
})
// 总金额
const TotalPrice = computed(() => {
    let total = 0
    tableData.value.forEach(obj => {
        total += (obj.goods_num * obj.goods.goods_price)
    })
    return total

})
const getActiveType = async (e) => {
    activeType.value = e
    let res = await UserCartList(route.query.type, token)
    let { count, lists } = res.data.data
    tableData.value = lists
}

function nav(){
    router.back()
}
function changeMoneyToCN(money) {
    var cnNums = new Array("零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"); //汉字的数字
    var cnIntRadice = new Array("", "拾", "佰", "仟"); //基本单位
    var cnIntUnits = new Array("", "万", "亿", "兆"); //对应整数部分扩展单位
    var cnDecUnits = new Array("角", "分", "毫", "厘"); //对应小数部分单位
    var cnIntLast = "元"; //整型完以后的单位
    var maxNum = 999999999999999.99; //最大处理的数字
    var IntegerNum; //金额整数部分
    var DecimalNum; //金额小数部分
    var ChineseStr = ""; //输出的中文金额字符串
    var parts; //分离金额后用的数组，预定义
    var zeroCount, IntLen, n, p, q, m, decLen;
    if (money == "") {
        return "";
    }
    money = parseFloat(money);
    if (money >= maxNum) {
        $.alert('超出最大处理数字');
        return "";
    }
    if (money == 0) {
        ChineseStr = cnNums[0] + cnIntLast
        return ChineseStr;
    }
    money = money.toString(); //转换为字符串
    if (money.indexOf(".") == -1) {
        IntegerNum = money;
        DecimalNum = '';
        cnIntLast = "元整";
    } else {
        parts = money.split(".");
        IntegerNum = parts[0];
        DecimalNum = parts[1].substr(0, 2);
    }
    if (parseInt(IntegerNum, 10) > 0) { //获取整型部分转换
        zeroCount = 0;
        IntLen = IntegerNum.length;
        for (let i = 0; i < IntLen; i++) {
            n = IntegerNum.substr(i, 1);
            p = IntLen - i - 1;
            q = p / 4;
            m = p % 4;
            if (n == "0") {
                zeroCount++;
            } else {
                if (zeroCount > 0) {
                    ChineseStr += cnNums[0];
                }
                zeroCount = 0; //归零
                ChineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
            }
            if (m == 0 && zeroCount < 4) {
                ChineseStr += cnIntUnits[q];
            }
        }
        ChineseStr += cnIntLast;
        //整型部分处理完毕
    }
    if (DecimalNum != '') { //小数部分
        decLen = DecimalNum.length;
        for (let i = 0; i < decLen; i++) {
            n = DecimalNum.substr(i, 1);
            if (n != '0') {
                ChineseStr += cnNums[Number(n)] + cnDecUnits[i];
            }
        }
    }
    if (ChineseStr == '') {
        ChineseStr += cnNums[0] + cnIntLast;
    }
    return ChineseStr;

}



// 权限
let priceShow = ref(true)

	
	let ordershow = ref(0)
	let bhShow = ref(0)
	let ggShow = ref(0)	
	let dwShow = ref(0)
	let slShow = ref(0)
	let djShow = ref(0)
	let bzShow = ref(0)
	

getAuth().then(res=>{
    ordershow.value = res.data.data.goodsinfo_classification
    console.log(res.data );
		bhShow.value = res.data.data.goodsinfo_sn
		ggShow.value = res.data.data.goodsinfo_spec
})
const PriceText = ref()
PriceText.value = changeMoneyToCN(TotalPrice.value)

const handleExp = () => {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    console.log('导出数据');
    CartExp(activeType.value,token).then(res => {
        if (res.data.code == 1) {
            console.log(res);
            loading.close()
            window.open(res.data.data.url)
        }
    })
    setTimeout(() => {
        loading.close()
    }, 2000);
}

</script>

<style lang="scss" scoped>
.total-cont {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.custom-table {
    border: 1px solid #000000;
    /* 设置边框颜色为红色 */
}

.custom-table .el-table__row {
    border-color: #000;
    /* 设置行边框颜色为绿色 */
}

.custom-table .el-table__column {
    border-color: #000;
    /* 设置列边框颜色为蓝色 */
}

.cart-cont {
    width: 6.25rem;
    margin: auto;
    padding-bottom: .3333rem;
    overflow: hidden;
    min-height: calc(100vh - .9063rem);

    >.detail-cont {
        height: .3125rem;

        display: flex;
        align-items: center;

        span {
            font-size: .0833rem;
            font-weight: 400;
            color: #666666;
        }
    }

    .cart-bg {
        height: .0104rem;
        background: #EEEEEE;
        border-radius: .0052rem;
        margin-bottom: .1042rem;
    }

    >.progress-cont {
        height: .4167rem;
        background: #FFFFFF;
        border-radius: .0521rem .0521rem 0rem 0rem;
        padding: .1146rem 4.4792rem .1146rem .1563rem;
        display: flex;
        align-items: center;

        >.step1 {
            width: .6771rem;
            height: .1875rem;
            background: #3F7233;
            border-radius: .0208rem;
            display: flex;
            justify-content: space-evenly;
            align-items: center;




        }

        p {
            font-size: .0729rem;
            font-weight: 400;
            color: #FFFFFF;
        }

        i {
            width: .0938rem;
            height: .0938rem;
            background: #F8F8F8;
            border-radius: 50%;
            line-height: .0938rem;
            text-align: center;
            font-size: .0729rem;
            font-weight: bold;
            color: #9AC218;
        }

        >.bg-cont {
            width: .3646rem;
            height: .0104rem;
            background: #CCCCCC;
        }

        >.step2 {
            width: .5729rem;
            height: .1875rem;
            background: #CCCCCC;
            border-radius: .0208rem;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }

        >.step2.active {
            background: #3F7233;
        }
    }

    >.cart-list {
        background: #FFFFFF;
        padding: .1563rem;

        .info-box {
            margin-bottom: .1042rem;
            font-size: 16px;

        }

        >h2 {
            font-size: 30px;
            text-align: center;
            font-weight: bold;
            color: #333333;
            margin-bottom: .1042rem;
            letter-spacing: 4px;
        }
    }
}
</style>

<style lang="scss">
.el-table__row,
.el-table__column {
    border-color: #000 !important;
    /* 设置行边框和列边框的颜色为红色 */
}

.el-descriptions__cell.el-descriptions__content.is-bordered-content {
    border: 1px solid #000;
}

.total-box {
    .el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell {
        border: 1px solid #000;
    }
}

.orderBtn {
    display: flex;
    padding-bottom: .01rem;

    .btn {
        width: 1.0417rem;
        height: .3125rem;
        background: #3F7233;
        border-radius: .0208rem;
        font-size: .0938rem;
        font-weight: 400;
        color: #FFFFFF;
        text-align: center;
        line-height: .3125rem;
        cursor: pointer;
        margin-bottom: .0763rem;
        margin-right: .0763rem;
    }

    .active {
        width: 1.0417rem;
        height: .3125rem;
        border: 1px solid #3F7233;
        color: #3F7233;
        border-radius: .0208rem;
        font-size: .0938rem;
        font-weight: 400;
        // color: #FFFFFF;
        text-align: center;
        line-height: .3125rem;
        cursor: pointer;
        margin-bottom: .0763rem;
        margin-right: .0763rem;
    }
}
</style>